<template>
<div class="q-pa-sm q-gutter-sm" style="padding-bottom:65px">
    <q-card :class="
        $q.platform.is.mobile
          ? 'q-pa-sm my-card shadow-6'
          : 'q-pa-md my-card shadow-6'
      ">
        <div :class="
          $q.platform.is.mobile
            ? 'q-pt-md q-pl-sm q-mb-sm'
            : 'q-pl-md q-pt-md q-mb-sm'
        " style="
          display: flex;
          align-items: center;
          font-weight: bold;
          font-size: 16px;
        ">
            <div style="
            width: 5px;
            height: 22px;
            background-color: #409eff;
            margin-right: 20px;
          "></div>
            日常
        </div>
        <q-separator inset />
        <div :class="
          $q.platform.is.mobile
            ? 'row q-pl-sm q-pt-md q-mb-sm'
            : 'row q-pl-md q-pt-md q-mb-sm'
        ">
            <div :class="
            $q.platform.is.mobile
              ? 'col-4 q-pa-sm column items-center justify-evenly content-center'
              : 'col-2 q-pa-sm column items-center justify-evenly content-center'
          " :style="$q.platform.is.mobile ? 'height:100px;' : 'height:100px'" @click="onReimburse">
                <q-icon name="mdi-cash-multiple" color="blue" size="26px"></q-icon>
                <span>报销</span>
            </div>
            <div :class="
            $q.platform.is.mobile
              ? 'col-4 q-pa-sm column items-center justify-evenly content-center'
              : 'col-2 q-pa-sm column items-center justify-evenly content-center'
          " :style="$q.platform.is.mobile ? 'height:100px;' : 'height:100px'">
                <q-icon name="mdi-gift-outline" color="blue" size="26px"></q-icon>
                <span>福利中心</span>
            </div>
        </div>
    </q-card>
    <q-card :class="
        $q.platform.is.mobile
          ? 'q-pa-sm my-card shadow-6'
          : 'q-pa-md my-card shadow-6'
      ">
        <div :class="
          $q.platform.is.mobile
            ? 'q-pt-md q-pl-sm q-mb-sm'
            : 'q-pl-md q-pt-md q-mb-sm'
        " style="
          display: flex;
          align-items: center;
          font-weight: bold;
          font-size: 16px;
        ">
            <div style="
            width: 5px;
            height: 22px;
            background-color: orange;
            margin-right: 20px;
          "></div>
            项目
        </div>
        <q-separator inset />
        <div :class="
          $q.platform.is.mobile
            ? 'row q-pl-sm q-pt-md q-mb-sm'
            : 'row q-pl-md q-pt-md q-mb-sm'
        ">
            <div @click="onQuote" :class="
            $q.platform.is.mobile
              ? 'col-4 q-pa-sm column items-center justify-evenly content-center'
              : 'col-2 q-pa-sm column items-center justify-evenly content-center'
          " :style="$q.platform.is.mobile ? 'height:100px;' : 'height:100px'">
                <q-icon name="mdi-view-list" color="orange" size="26px"></q-icon>
                <span>报价</span>
            </div>

        </div>
    </q-card>
    <q-card :class="
        $q.platform.is.mobile
          ? 'q-pa-sm my-card shadow-6'
          : 'q-pa-md my-card shadow-6'
      ">
     <tips-title class="text-bold text-subtitle1" tipclass="bg-cyan" title="工具" lineColor></tips-title>

        <div :class="
          $q.platform.is.mobile
            ? 'row q-pl-sm q-pt-md q-mb-sm'
            : 'row q-pl-md q-pt-md q-mb-sm'
        ">
            <div @click="onDesktop" :class="
            $q.platform.is.mobile
              ? 'col-4 q-pa-sm column items-center justify-evenly content-center'
              : 'col-2 q-pa-sm column items-center justify-evenly content-center'
          " :style="$q.platform.is.mobile ? 'height:100px;' : 'height:100px'">
                <q-icon  color="cyan" size="35px" name="mdi-desktop-tower-monitor"></q-icon>
                <span>电脑管理</span>
            </div>
            <div @click="onPrompt" :class="
            $q.platform.is.mobile
              ? 'col-4 q-pa-sm column items-center justify-evenly content-center'
              : 'col-2 q-pa-sm column items-center justify-evenly content-center'
          " :style="$q.platform.is.mobile ? 'height:100px;' : 'height:100px'">
                <q-icon  color="cyan" size="26px"><svg t="1688635266658" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3461" width="200" height="200"><path d="M853.1 916.4H167.6c-34.9 0-63.3-28.4-63.3-63.3V167.6c0-34.9 28.4-63.3 63.3-63.3h685.5c34.9 0 63.3 28.4 63.3 63.3v685.5c0 34.9-28.4 63.3-63.3 63.3z m-685.5-772c-12.8 0-23.3 10.4-23.3 23.3v685.5c0 12.8 10.4 23.3 23.3 23.3h685.5c12.8 0 23.3-10.4 23.3-23.3V167.6c0-12.8-10.4-23.3-23.3-23.3H167.6z"  p-id="3462"></path><path d="M695.7 333.2H332.9V404h38.5v-31.7h122V685h-13.8v38.5h66.8V685h-11.2V372.3h122.3V404H696v-70.8z"  p-id="3463"></path></svg></q-icon>
                <span>提词</span>
            </div>

        </div>
    </q-card>
</div>
</template>

<script>
export default {
    name: "appIndex",
    data() {
        return {};
    },
    created() {
        document.title = "一方映画--应用中心"
    },
    methods: {
        onReimburse() {
            this.$router.push('/reimburse')
        },
        onQuote() {
            this.$router.push('/quote')
        },
        onDesktop(){
          this.$router.push('/computer')
        },
        onPrompt(){
          window.open('http://tc.yfyh.cc',"_blank")
        }
    },
};
</script>

<style scoped>
.shadow-6 {
    box-shadow: 5px 5px 10px rgb(221, 221, 221);
}
</style>
